<template>
<div>
  <el-main>
    <div >
      <el-button type="primary" class="insert" @click="onInsertEdit()" >添加人物</el-button>
    </div>
    <el-table ef="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="123"
    style="width: 100%" >
    <!-- <el-table-column label="选择" width="50" center>
                    <template slot-scope="scope">
                        <el-radio class="radio" v-model="radio" :label="scope.$index"   >&nbsp;</el-radio>
                    </template>
      </el-table-column> -->
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="姓名" width="140"></el-table-column>
      <el-table-column prop="sex" label="性别" width="120" :formatter="formatSex"></el-table-column>
      <el-table-column prop="desc" label="描述"></el-table-column>
      <el-table-column  label="操作"  width="200">
       <template slot-scope="scope">
                        <el-button size="mini" @click="onForeEdit(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="onRemovePage(scope.row)">删除
                        </el-button>
                    </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </el-main>
<!-- 弹窗 -->
<el-dialog title="人物修改" :visible.sync="dialogFormVisible" @close="resetForm('ruleForm')" >
<!-- ruleForm是整个表单的ID -->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >

   <el-form-item label="人物id" prop="figureId" >
    <el-input v-model="ruleForm.figureId" :disabled="true" ></el-input>
  </el-form-item>
  <el-form-item label="人物名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="性别" prop="sex">
    <el-select v-model="ruleForm.sex" placeholder="请选择活动区域">
      <el-option label="男" value="1"></el-option>
      <el-option label="女" value="2"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="人物描述" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm()">确定</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>


  
</el-dialog>



</div>

</template>
<script>
import Api from '../../utils/api';
import { open } from 'fs';
export default {
   data() {
      return {
        tableData: [],
        total:0,
        pageNumber:1,
        pageSize :5,
        dialogFormVisible: false,
        ruleForm: {
          name: '',
          sex: '',
          desc: '',
          figureId: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入人物名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请填写人物描述', trigger: 'blur' },
             { min: 3, max: 200, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      }
    },
     methods: {
      requestData(pageNumber,pageSize){
        var params ={};
        params.pageNumber= pageNumber;
        params.pageSize= pageSize;

        Api.figureList(params).then((resonse) => {
                this.tableData = resonse.body.list;
                this.total = resonse.body.count;
                this.pageNumber = pageNumber;
                this.pageSize = pageSize;
                console.log(this.tableData);
              })

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.requestData(this.pageNumber,val)
      },
      handleCurrentChange(val) {
         this.requestData(val,this.pageSize)
        console.log(`当前页: ${val}`);
      },
      showDetail(row){
        console.log(row);
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      onForeEdit(row) {
                const figureId = row.figureId;
                this.dialogFormVisible = true;
                console.log("参数"+figureId)
                var params ={
                  figureId: figureId
                };
                //利用api统一管理发送api
                Api.figureGetOne(params).then((resonse) => {
                resonse.body.figureId;
                this.ruleForm.name =  resonse.body.name;
                this.ruleForm.sex =  resonse.body.sex+"";
                this.ruleForm.desc = resonse.body.desc;
                this.ruleForm.figureId = resonse.body.figureId;
                console.log(resonse);
              })


                //this.$router.push(`/index/figureEdit?figureId=${figureId}`);
            },
      //提交表单
      submitForm(){
         console.log(this.ruleForm.figureId);
        //根据是否有figureId来判断是否是新增还是修改
        if(this.isEmpty(this.ruleForm.figureId)){
            Api.figureSave(this.ruleForm).then((response)=>{
          if(response.code==200){
            this.dialogFormVisible = false;
            this.open2();
          }else{
            this.dialogFormVisible = false;
            this.open3();
          }
          this.$refs['ruleForm'].resetFields();
        })
        }else{
          Api.figureUpdate(this.ruleForm).then((response)=>{
          if(response.code==200){
            this.dialogFormVisible = false;
            this.open2();
            
          }else{
            this.dialogFormVisible = false;
            this.open3();
          }
        })
        this.$refs['ruleForm'].resetFields();
        }
        

      },
      resetForm(formName) {
        console.log("清空数据")
        this.$refs[formName].resetFields();
      },
      open2() {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1000
        });
      },

      open3() {
        this.$message({
          message: '操作失败',
          type: 'error',
          duration : 1000,
          center: true,
          
        });
      },
      onInsertEdit(){
        this.dialogFormVisible = true;

      },
      isEmpty(obj){
        if(typeof obj == "undefined" || obj == null || obj == ""){
        return true;
        }else{
            return false;
        }
      },
      //删除操作
      onRemovePage(row){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

            var figureId = row.figureId;
            var params = {
              figureId: figureId
            }
          Api.figureDelete(params).then((response) =>{
            if(response.code == 200){

            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //刷新列表中的数据
          this.requestData(this.pageNumber,this.pageSize);
            }

          })


         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      formatSex(row, column){
        return row.sex == '1' ? "男" : row.sex == '2' ? "女" : "性别不详";
      }
      },





      //钩子函数
      mounted: function(){
         this.requestData(1,5)
          },

  };
</script>
<style>
  .insert {
    left: -40%;
    position: relative;
  }
</style>


